<template>
<div class="bind">
  <div class="title">设备绑定</div>
  <div class="line">
    <div class="name">设备名称</div>
    <div class="value">
      <input type="text" v-model="deviceName">
    </div>
  </div>
  <div class="line">
    <div class="name">模组编号</div>
    <div class="value">
      <input type="text" v-model="lockNumber">
      <div class="iconfont" v-if="lockNumber==''" @click="beginScanLock">
        <img src="../assets/scan.png" alt="">
      </div>
      <div class="font" v-if="lockNumber!=''&&isBindDevice" @click="unBindeDevice('lock')">解绑</div>
    </div>
  </div>
  <div class="line" v-if="isShow1">
    <div class="name">绑定密码</div>
    <div class="value">
      <input type="text" v-model="passwordVal">
    </div>
  </div>
  <div class="line" v-if="isShow1">
    <div class="name">确认密码</div>
    <div class="value">
      <input type="text" v-model="repeatPasswordVal">
    </div>
  </div>
  <div class="line">
    <div class="name">摄像头编号</div>
    <div class="value">
      <input type="text" v-model="cameraNumber">
      <div class="iconfont" v-if="cameraNumber==''" @click="beginScanCamera">
        <img src="../assets/scan.png" alt="">
      </div>
      <div class="font" v-if="cameraNumber!=''&&isBindCamera" @click="unBindeDevice('camera')">解绑</div>
    </div>
  </div>
  <div class="line" v-show="isTelecom">
    <div class="name">摄像头登录名</div>
    <div class="value">
      <input type="text" v-model="cameraLoginName">
    </div>
  </div>
  <div class="line" v-show="isTelecom">
    <div class="name">摄像头密码</div>
    <div class="value">
      <input type="text" v-model="cameraLoginPwd">
    </div>
  </div>
  <div class="submit">
    <x-button mini type="primary" @click.native="submitDevice" v-if="isShow2">确定</x-button>
  </div>
  <toast v-model="bindIsSuccess" :type="'success'" :text="'绑定成功'" :width="'10em'"></toast>
  <div v-transfer-dom>
    <confirm v-model="unLockBindFlag" :title="'解绑智能锁'" @on-confirm="doUnLockBind">
      <div slot="default" class="bindSuccess-tip">
        <p>请输入6位数字密码</p>
        <input type="text" v-model="password">
      </div>

    </confirm>
  </div>
  <div v-transfer-dom>
    <confirm v-model="UnCameraBind" :title="'解绑摄像头'" @on-confirm="doUnCameraBind">
    </confirm>
  </div>
</div>
</template>
<script>
import "../iconfont/iconfont.css";
import {
  XButton,
  Toast,
  Confirm,
  TransferDomDirective as TransferDom
} from "vux";
export default {
  directives: {
    TransferDom
  },
  components: {
    XButton,
    Toast,
    Confirm
  },
  data: function() {
    return {
      bindIsSuccess: false,
      title: "",
      unLockBindFlag: false,
      UnCameraBind: false,
      mydevice: null,
      deviceName: "",
      lockNumber: "",
      cameraNumber: "",
      password: "",
      passwordVal: "",
      cameraLoginName: "",
      cameraLoginPwd: "",
      repeatPasswordVal: "",
      isShow1: true, // 控制绑定密码、确认密码是否显示
      isShow2: true, // 控制确定按钮是否显示
      isBindDevice: false, // 是否绑定智能锁
      isBindCamera: false, // 是否绑定摄像头
      isTelecom: false
    };
  },
  mounted: function() {
    this.getMyDevice();
  },
  methods: {
    getMyDevice: function() {
      this.$http.get("http://iot.malanco.com/myDevice").then(response => {
        if (response.data.success == "true") {
          var device = response.data.data;
          this.mydevice = device;
          if (device != null) {
            // 智能锁
            if (device.deviceId != null && device.deviceId != "") {
              // 已绑定
              this.lockNumber = device.deviceId;
              this.isShow1 = false;
              this.isBindDevice = true;
            } else {
              // 未绑定
              this.lockNumber = "";
              this.isShow1 = true;
            }
            if (device.name != null && device.name != "") {
              this.deviceName = device.name;
            }

            // 摄像头
            if (device.cameraId != null && device.cameraId != "") {
              // 已绑定
              this.cameraNumber = device.cameraId;
              this.isBindCamera = true;
            } else {
              // 未绑定
              this.cameraNumber = "";
            }

            // 确定按钮
            if (
              device.deviceId != null &&
              device.deviceId != "" &&
              device.cameraId != null &&
              device.cameraId != ""
            ) {
              // 隐藏
              this.isShow2 = false;
            } else {
              // 显示
              this.isShow2 = true;
            }
          }
        }
      });
    },
    submitDevice: function() {
      //提交设备/摄像头绑定
      if (this.lockNumber == "" || this.deviceName == "") {
        this.$vux.toast.show({
          text: "请输入设备信息"
        });
        return;
      }
      if (!this.isBindDevice || !this.isBindCamera) {
        // 仅在未绑定设备/摄像头（至少有1个未绑定）时提交绑定事件
        if (!this.isBindDevice) {
          if (this.passwordVal != this.repeatPasswordVal) {
            this.$vux.toast.show({
              text: "两次密码不匹配"
            });
            return;
          }

          if (this.passwordVal.length != 6) {
            this.$vux.toast.show({
              text: "密码须是6位数字"
            });
            return;
          }
        }

        this.$http
          .post("http://iot.malanco.com/bindDeviceToUser", {
            deviceId: this.lockNumber,
            name: this.deviceName,
            cameraId: this.cameraNumber,
            password: this.passwordVal,
            cameraAccount: this.cameraLoginName,
            cameraPassword: this.cameraLoginPwd
          })
          .then(response => {
            this.$store.dispatch("changeName", this.deviceName);
            this.bindIsSuccess = true;
            setTimeout(() => {
              this.$router.push({
                path: "/main/bindSuccess"
              });
            }, 1000);
          });
      }
    },
    beginScanCamera: function() {
      // 扫描智能锁二维码
      var that = this;
      this.$wechat.ready(function() {
        that.$wechat.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果。
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            var result = res.resultStr;
            var dianxinCameraIndex = result.indexOf("|");
            var wulianCameraIndex = result.indexOf("cmic");
            if (dianxinCameraIndex > 0) {
              // 天翼摄像头
              var result = result.substr(0, dianxinCameraIndex);
              that.cameraNumber = result;
              that.isTelecom = true;
            } else if (wulianCameraIndex > -1) {
              // 物联的摄像头
              var result = result.substr(4);
              that.cameraNumber = result;
              that.isTelecom = false;
            } else {
              that.isTelecom = false;
              that.$vux.toast.show({
                text: "编号格式错误"
              });
            }
          }
        });
      });
    },
    beginScanLock: function() {
      // 扫描智能锁二维码
      var that = this;
      this.$wechat.ready(function() {
        that.$wechat.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果。
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            try {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              var lockId = result.split(";")[2].split(":")[1];
              that.lockNumber = lockId;
            } catch (exception) {
              that.$vux.toast.show({
                text: "编号格式错误"
              });
            }
          }
        });
      });
    },
    unBindeDevice: function(type) {
      // 解绑智能锁/摄像头
      if (type == "lock") {
        this.unLockBindFlag = true;
      } else if (type == "camera") {
        this.UnCameraBind = true;
      }
    },
    doUnLockBind() {
      // 解绑智能锁
      var data = {
        deviceId: this.lockNumber,
        password: this.password
      };
      this.$http({
        url: "http://iot.malanco.com/unBindLock", //
        data: JSON.stringify(data),
        method: "POST",
        headers: {
          "Content-Type": "application/json; charset=utf-8"
        }
      }).then(
        response => {
          if (response.data.success == "true") {
            this.$vux.toast.show({
              text: "设备解绑成功"
            });
            this.lockNumber = "";
            this.isBindDevice = false;
            this.isShow1 = true;
            this.isShow2 = true;
            this.unLockBindFlag = false;
            this.myDevice.deviceId = "";
          }
          this.password = "";
        },
        response => {
          var message = response.response.data.exceptionObj.message;
          this.$vux.toast.show({
            type: "warn",
            text: message
          });
          this.password = "";
        }
      );
    },
    doUnCameraBind() {
      //解绑摄像头
      var data = {
        cameraId: this.cameraNumber
      };
      this.$http({
        url: "http://iot.malanco.com/unBindCamera",
        data: JSON.stringify(data),
        method: "POST",
        headers: {
          "Content-Type": "application/json; charset=utf-8"
        }
      }).then(response => {
        if (response.data.success == "true") {
          this.$vux.toast.show({
            text: "设备解绑成功"
          });
          this.cameraNumber = "";
          this.isBindCamera = false;
          this.isShow2 = true;
          this.UnCameraBind = false;
        }
      });
    }
  }
};
</script>
<style lang="less">
.bind {
  margin: 0 10px;
  .title {
    text-align: center;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
  }
  .line {
    display: flex;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    align-items: center;
    position: relative;
    .name {
      width: 75px;
      height: 30px;
    }
    .value {
      flex-grow: 1;
      input {
        border: none;
        outline: none;
        width: 113px;
        margin-right: 28px;
        padding-left: 10px;
      }
      .iconfont {
        position: absolute;
        right: 0;
        top: 0;
        height: 30px;
        line-height: 30px;
        border-left: 1px solid #e1f0f6;
        padding-left: 5px;
        img {
          width: 15px;
          margin-top: 8px;
        }
      }
      .font {
        position: absolute;
        right: 0;
        top: 0;
        height: 30px;
        line-height: 30px;
        border-left: 1px solid #e1f0f6;
        padding-left: 5px;
        font-size: 12px;
        color: #ccc;
      }

      border-bottom: 1px solid #e1f0f6;
    }
  }
  .submit {
    text-align: center;
    margin-top: 40px;
    .weui-btn_primary {
      background-color: #76d075;
    }
  }
}
</style>
